<template>
  <a-row style="padding-bottom: 1%">
    <div>
      <a-col
        ><a-tag color="red"> {{ name }}</a-tag>
      </a-col>
    </div>
    <div>
      <a-col><a-tag color="red">数据库</a-tag> </a-col>
    </div>
    <a-col :span="1">
      <a-select v-model:value="db" style="width: 80px">
        <a-option
          v-for="number in numbers"
          :key="number"
          :value="number"
          @click="saveDb(number)"
          >{{ number }}</a-option
        >
      </a-select>
    </a-col>

    <a-col :span="5" :push="12">
      <a-input-search
        v-model:value="searchValue"
        placeholder="搜索名称"
        style="width: 200px"
        @search="onSearch"
      />
    </a-col>
    <a-col :span="1" :push="12">
      <a-space>
        <a-button type="primary" @click="Reload">
          <ReloadOutlined />
        </a-button>
      </a-space>
    </a-col>
  </a-row>
  <a-breadcrumb separator=":">
    <a-breadcrumb-item v-for="item in breadcrumbData" :key="item.href">
      <a
        :href="item.href"
        @click="breadcrumbfunc('', item.defaultlabel)"
        style="color: royalblue"
      >
        <component :is="item.icon" />
        <span>{{ item.label }}</span>
      </a>
    </a-breadcrumb-item>
  </a-breadcrumb>
  <div>
    <a-table :data-source="data" :pagination="paginationConfig">
      <a-table-column title="序号" data-index="index" fixed="left">
        <template v-slot="{ text }">
          <a-tag type="default" :title="text">{{ text }}</a-tag>
        </template>
      </a-table-column>
      <a-table-column key="key" title="名称" data-index="key">
        <template v-slot="{ text }">
          <a-tag color="green" :title="text">{{ text }}</a-tag>
        </template>
      </a-table-column>
      <a-table-column key="type" title="类型" data-index="type">
        <template v-slot="{ text }">
          <a-tag color="green" :title="text">{{ text }}</a-tag>
        </template>
      </a-table-column>
      <a-table-column key="tags" title="操作" fixed="right">
        <template #customRender="{ record }">
          <a-tag
            color="red"
            :title="text"
            @click="GeTtopicList(record, record.key)"
          >
            查看
          </a-tag>
        </template>
      </a-table-column>
    </a-table>
  </div>
</template>
<script>
import { ReloadOutlined } from "@ant-design/icons-vue";
import axios from "axios";
import { useRoute } from "vue-router";
import { message } from "ant-design-vue";
import { HomeOutlined } from "@ant-design/icons-vue";

export default {
  components: {
    ReloadOutlined,
  },
  data() {
    return {
      paginationConfig: {
        pageSize: 50, // 每页显示的记录数
      },
      data: [],
      searchValue: "",
      route: useRoute().params.itemName,
      db: "0",
      numbers: Array.from({ length: 16 }, (_, i) => i),
      host: "",
      password: "",
      port: "3306",
      breadcrumbData: [{ href: "#", icon: HomeOutlined, label: "" }],
    };
  },
  methods: {
    Reload() {
      this.GeTtopicList();
      this.searchValue = "";
    },
    breadcrumbfunc(record = "", path = "") {
      this.breadcrumbData = [{ href: "#", icon: HomeOutlined, label: "" }];
      if (path) {
        const parts = path.split(":");
        for (let i = 1; i <= parts.length; i++) {
          const result = parts.slice(0, i).join(":");
          this.breadcrumbData.push({
            href: "#",
            label: parts[i - 1],
            defaultlabel: result,
          });
        }
      }
      this.GeTtopicList(record, path);
    },
    GeTtopicList(record = "", path = "") {
      const rename = record.key;
      if (rename) {
        const parts = rename.split(":");
        const lastElement = parts[parts.length - 1];
        console.log(rename, lastElement);
        this.breadcrumbData.push({
          href: "#",
          label: lastElement,
          defaultlabel: rename,
        });
      }
      if (record.type != "" && record.type != undefined) {
        this.handleClick(record);
      } else {
        axios
          .post("/api/redis/list", {
            host: this.host,
            name: this.name,
            db: this.db,
            port: this.port,
            password: this.password,
            path: path,
          }) // 发送GE T请求到后端API
          .then((response) => {
            this.data = response.data.data;
            const msg = response.data.msg;
            this.addIndexToData();
            message.info(msg);
          })
          .catch((error) => {
            // 处理请求错误
            console.log(error.response.data.msg);
          });
      }
    },
    addIndexToData() {
      this.data.forEach((item, index) => {
        item.index = index + 1;
      });
    },
    onSearch() {
      if (this.searchValue.trim() === "") {
        // 如果搜索关键字为空，则显示全部数据
        this.GeTtopicList();
      } else {
        // 使用筛选条件过滤数据
        const regex = new RegExp(this.searchValue, "i");
        this.data = this.data.filter((item) => {
          return regex.test(item.key);
        });
        this.addIndexToData(); // 更新索引
      }
    },
    handleClick(record) {
      // 处理点击事件，使用 Vue Router 进行路由导航
      const name = record.key;
      const type = record.type;
      if (type === "list") {
        this.$router.push({
          path: "/log/data/",
          query: {
            host: this.host,
            name: name,
            db: this.db,
            password: this.password,
          },
        });
      } else {
        this.$router.push({
          path: "/redis/zset/",
          query: {
            host: this.host,
            name: name,
            db: this.db,
            password: this.password,
            type: type,
          },
        });
      }
    },
    saveDb(number) {
      axios
        .post("/api/redis/db", { host: this.host, db: number }) // 发送GE T请求到后端API
        .then((response) => {
          const msg = response.data.msg;
          this.addIndexToData();
          this.GeTtopicList();
          message.info(msg);
        })
        .catch((error) => {
          // 处理请求错误
          console.log(error.response.data.msg);
        });
    },
    GetDb() {
      axios
        .post("/api/redis/get/db", {
          host: this.host,
          port: this.port,
          password: this.password,
        }) // 发送GE T请求到后端API
        .then((response) => {
          const msg = response.data.msg;
          this.db = response.data.data.db;
          this.GeTtopicList();
          message.info(msg);
        })
        .catch((error) => {
          // 处理请求错误
          console.log(error.response.data.msg);
        });
    },
  },
  created() {
    console.log(this.breadcrumbData);
    this.name = this.$route.query.name;
    this.host = this.$route.query.RedisHost;
    this.port = this.$route.query.port;
    this.password = this.$route.query.Password;
    this.GetDb();
  },
  computed: {
    totalCount() {
      return this.data.length;
    },
  },
};
</script>

<style>
.right-align {
  text-align: right;
}
</style>
